<template>
    <div class="order" id="order">
        
    </div>
</template>

<script>
import {ordersStatistics} from '@/api/report'
import {dateFomat} from '@/utils/formValidate'
export default {
    props:["date"],
    data(){
        return{
            res:{
                addOrder: 1677,
                orderRate: 0.9,
                validOrder: 1556
            },
            legend:["所有订单",'有效订单'],
            xAxis:['05-01','05-02','05-03','05-04','05-05','05-06','05-07'],

            series:[
                {
                name: "所有订单",
                type: "line",
                data: [],
                },
                {
                name: "有效订单",
                type: "line",
                data: [],
                },
            ],
            

        }
    },
    watch:{
        date(newDate,oldDate){
            this.drawChart();
        }
    },
    mounted() {
        this.drawChart();
      
    },
    methods:{
        drawChart() {
            
            // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
            let myChart = this.$echarts.init(document.getElementById("order"));
            // console.log(myChart)
            // 指定图表的配置项和数据

            
            let option = {
            title: {
                text: "订单统计",
                subtext:`订单总数 ${this.res.addOrder}  有效订单 ${this.res.validOrder}  订单完成率 ${this.res.orderRate * 100}%`,
                subtextStyle:{//副标题内容的样式
                    color:"#333",//绿色
                    fontStyle:'normal',//主标题文字字体风格，默认normal，有italic(斜体),oblique(斜体)
                    fontWeight:"normal",//可选normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
                    fontFamily:"san-serif",//主题文字字体，默认微软雅黑
                    fontSize:12,//主题文字字体大小，默认为12px,
                    
                },
            },
            tooltip: {},
            legend: {
                data: ["所有订单",'有效订单'],
            },
            xAxis: {
                data: this.xAxis,
            },
            yAxis: {},
            series: this.series
        };
        myChart.showLoading();
        myChart.setOption(option);
        ordersStatistics(this.date[0],this.date[1]).then(res=>{
            // console.log(typeof res.data.orderCountList)
            
            myChart.setOption({
                title:{
                    subtext:`订单总数 ${res.data.totalOrderCount}  有效订单 ${res.data.validOrderCount}  订单完成率 ${(res.data.orderCompletionRate * 100).toFixed(2)}%`,
                },
                xAxis: {
                    data: dateFomat(res.data.dateList) ,
                    // data: res.data.dateList.split(',') ,
                },
                series: [
                    {
                        name: "所有订单",
                        type: "line",
                        data:res.data.orderCountList.split(',')
                    },
                    {
                        name: "有效订单",
                        type: "line",
                        data: res.data.validOrderCountList.split(','),
                        // data:[0,0,0,0,1,0,2]
                    },
                ]
            });
            myChart.hideLoading();
        })
        // 使用刚指定的配置项和数据显示图表。
        
        },


    },

}
</script>

<style scoped>
.order{
    height: 400px;  
  width: 600px;
}
</style>